<template>
    <div class="app-container">
        <!-- 查询区域 -->
        <div class="table-search">
            <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                <el-form-item label="文章标题">
                    <el-input class="w240" v-model="queryForm.title" placeholder="请输入游戏名称" clearable />
                </el-form-item>
                <el-form-item label="关键词id">
                    <el-input style="width: 200px;" v-model="queryForm.id" placeholder="请输入关键词id" clearable />
                </el-form-item>
                <el-form-item label="员工">
                    <el-select style="width: 200px;" v-model="queryForm.create_by" placeholder="请选择状态" clearable>
                        <el-option v-for="item in userList" :key="item.id" :label="item.user_name"
                            :value="item.user_name" />
                    </el-select>
                </el-form-item>
                <el-form-item label="所属分类">
                    <el-select class="w190" v-model="queryForm.category_id" placeholder="请选择所属分类" clearable>
                        <el-option :label="key" :value="value" v-for="(key, value) in publicParams.ARTICLE_TYPE" />
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select class="w190" v-model="queryForm.status" placeholder="请选择游戏类型" clearable>
                        <el-option label="启用" value="1" />
                        <el-option label="禁用" value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item label="时间">
                    <el-date-picker v-model="queryForm.create_time" value-format="YYYY-MM-DD HH:mm:ss"
                        time-format="HH:mm" type="daterange" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="querySubmit">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 表格区域 -->
        <div class="table-body">
            <!-- 操作 -->
            <div class=" ">
                <el-button :loading="loadingRefresh" @click="onRefresh" color="#40485b" type="info">刷新</el-button>
                <el-button @click="onAdd" type="primary">添加</el-button>
                <el-button @click="onDeleteAll" type="danger">批量删除</el-button>
                <el-button @click="onPublishAll(1)" type="primary">批量发布</el-button>
                <el-button @click="onPublishAll(0)" type="warning">批量下架</el-button>
            </div>
            <!-- 列表 -->
            <el-table v-loading="loading" class="mt15 w100" :data="dataList" border
                @selection-change="handleSelectionChange" @sort-change="handleSortChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column prop="id" label="ID" width="50" />
                <el-table-column prop="title" label="文章标题" />
                <el-table-column prop="create_by" label="上传人" width="90" align="center" />
                <el-table-column prop="day" label="日点击" align="center" width="80" sortable="custom" />
                <el-table-column prop="week" label="周点击" align="center" width="80" sortable="custom" />
                <el-table-column prop="total" label="总点击" align="center" width="80" sortable="custom" />
                <el-table-column prop="status" label="所属分类" align="center" width="100">
                    <template #default="{ row }">
                        <el-tag>{{ publicParams.ARTICLE_TYPE[row.category_id] }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center" width="90">
                    <template #default="{ row }">
                        <el-tag :disable-transitions="true" v-if="row.status === 1" type="success">已发布</el-tag>
                        <el-tag :disable-transitions="true" v-else type="danger">未发布</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="release_time" label="定时发布时间" align="center" width="160" sortable="custom" />
                <el-table-column prop="update_time" label="更新时间" align="center" width="160" sortable="custom" />
                <el-table-column prop="create_time" label="创建时间" align="center" width="160" sortable="custom" />
                <el-table-column fixed="right" label="操作" align="center" width="320">
                    <template #default="scope">
                        <el-button @click="onPreview(scope.row.id)" type="success">预览</el-button>
                        <el-button @click="onEdit(scope.row.id)" type="primary">编辑</el-button>
                        <el-button @click="onPublish(scope.row)" :type="scope.row.status === 1 ? 'warning' : 'success'">
                            {{ scope.row.status === 1 ? '下架' : '发布' }}
                        </el-button>
                        <el-popconfirm width="220" confirm-button-text="删除" cancel-button-text="取消" icon-color="#626AEF"
                            title="是否确认删除?" @confirm="onDelete(scope.row)">
                            <template #reference>
                                <el-button type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div v-if="total > 0" class="table-pagination">
                <el-pagination background layout="sizes,total, ->, prev, pager, next, jumper"
                    :currentPage="queryForm.pageNum" :page-size="queryForm.pageSize" :total="total"
                    @size-change="onTableSizeChange" @current-change="onTableCurrentChange"></el-pagination>
            </div>
        </div>
        <!--  -->
    </div>
</template>

<script setup>
import { ref, reactive, defineExpose, toRaw, inject } from 'vue'
import { getArticleList, delArticle, statusArticle } from '@/api/article';
import { subSelect } from '@/api/tag'
import { listUser } from "@/api/system/user"
import { useRouter } from 'vue-router';
defineOptions({
    name: 'Article/index',
})
const router = useRouter()

const publicParams = inject('publicParams');
const used = inject('used');
//获取用户列表
const userList = ref([]);
listUser({ pageNum: 1, pageSize: 100 }).then(res => {
    userList.value = res.data.rows
})
//分类
let flList = ref([]);//分类列表
//获取分类
const getFlSelect = () => {
    subSelect({ group_id: 3 }).then(res => {
        flList.value = res.data
    })
}
getFlSelect()

const querySubmit = () => {
    queryForm.pageNum = 1;
    getDataList();//初始化获取列表数据
}

let ids = ref([]);//多选id
let loadingRefresh = ref(false);//筛选按钮状态
// 刷新按钮
const onRefresh = () => {
    loadingRefresh.value = true;
    getDataList();//初始化获取列表数据
}
// 新增按钮
const onAdd = () => {
    router.push('/article/add')
}
// 编辑按钮
const onEdit = (id) => {
    router.push('/article/add?id=' + id)
}
// 预览按钮
const onPreview = (id) => {
    window.open(`https://www.zw148.com/news/${id}.html`)

}
//发布按钮
const onPublish = (item) => {
    statusArticle({ id: item.id, status: item.status == 1 ? 0 : 1 }).then(res => {
        if (res.code == 1) {
            used.msgSuccess(res.message)
            getDataList();//初始化获取列表数据
        } else {
            used.msgError(res.message)
        }
    })

}
//选择行
const handleSelectionChange = (val) => {
    ids.value = val.map((item) => item.id);
}
//排序
const handleSortChange = (column) => {
    queryForm.order_by = column.order ? column.order == 'ascending' ? (column.prop + ',asc') : (column.prop + ',desc') : '';
    getDataList()
}
//批量发布/下架
const onPublishAll = (type) => {
    if (ids.value.length == 0) {
        used.msgError(`请选择要批量${type ? '发布' : '下架'}的数据`)
        return false;
    }
    used.confirm(`确定要批量${type ? '发布' : '下架'}选中的数据吗？`).then(() => {
        let params = {
            id: ids.value.join(','),
            status: type ? 1 : 0
        }
        statusArticle(params).then(res => {
            if (res.code == 1) {
                used.msgSuccess(res.message)
                getDataList();//初始化获取列表数据
            } else {
                used.msgError(res.message)
            }
        })
    })
}
//批量删除
const onDeleteAll = () => {
    if (ids.value.length == 0) {
        used.msgError('请选择要删除的数据');
        return false;
    }
    used.confirm('确定要删除选中的数据吗？').then(() => {
        let params = { id: ids.value.join(',') }
        delSubmit(params);
    })
}
/* 删除按钮 - 单个 */
const onDelete = (row) => {
    let params = { id: row.id }
    delSubmit(params);
}
//删除提交
const delSubmit = (params) => {
    params.rLoading = 1
    delArticle(params).then(res => {
        if (res.code == 1) {
            used.msgSuccess(res.message)
            getDataList();//初始化获取列表数据
        } else {
            used.msgError(res.message)
        }
    })
}
/*获取列表数据 */
let dataList = ref([]);
let loading = ref(false);
let queryForm = reactive({
    id: '',
    order_by: '',
    status: '',
    title: '',
    start_time: '',//结束时间
    end_time: '',//开始时间
    category_id: '',
    pageNum: 1,
    pageSize: 10,
});
let queryTime = ref('');//搜索中的时间
let total = ref(0);
getDataList();//初始化获取列表数据

// 获取列表数据
function getDataList() {
    loading.value = true;
    let dparams = used.deepClone(queryForm)
    dparams.start_time = dparams.create_time ? dparams.create_time[0] : '';
    dparams.end_time = dparams.create_time ? dparams.create_time[1].replace('00:00:00', '23:59:59') : '';
    delete dparams.create_time;
    //选择了时间
    if (queryTime.value) {
        dparams.start_time = queryTime.value[0];
        dparams.end_time = queryTime.value[1];
    }
    getArticleList(dparams).then(res => {
        if (res.code == 1) {
            dataList.value = res.data.rows;
            total.value = res.data.total;
        }
        loading.value = false;
        //刷新按钮状态
        if (loadingRefresh.value) {
            loadingRefresh.value = false;
        }
    })
}
const onTableSizeChange = (val) => {
    queryForm.pageSize = val;
    getDataList()
}
const onTableCurrentChange = (val) => {
    queryForm.pageNum = val;
    getDataList()
}

defineExpose({
    loading
})
</script>

<style scoped lang="scss"></style>
